<template>
	<view class="container">
		<tui-list-cell :hover="false" :lineLeft="false">
			<view class="tui-cell-input">
				<input v-model="nickname" placeholder="请输入" placeholder-class="tui-phcolor" type="text"
					:auto-focus="true" :focus="true" maxlength="40" @input="inputNickname" />
				<!-- 	<view class="tui-icon tui-icon-close_fill" v-show="nickname" @tap="clearInput"></view> -->
				<icon type="clear" :size="14" color="#bfbfbf" v-show="nickname" @tap="clearInput"></icon>
			</view>
		</tui-list-cell>
		<view class="tui-btn-box">
			<tui-button shadow height="88rpx" @click="danger" shape="circle" type="danger">确定</tui-button>
		</view>
	</view>
</template>

<script>
	import { postChangeUsername } from '@/apis/index.js'
	export default {
		data() {
			return {
				nickname: '',
				index:null
			};
		},
		onLoad(option) {
			this.index=option.index
			this.nickname=option.name
		},
		methods: {
			inputNickname(e) {
				this.nickname = e.detail.value;
			},
			clearInput() {
				this.nickname = '';
			},
			danger() {
				if (this.index==1) {
					postChangeUsername({
						username: this.nickname
					}).then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							let pages = getCurrentPages()
							let prevPage = pages[pages.length - 2]
							prevPage.$vm.getValue(this.nickname)
							uni.navigateBack({
								delta: 1
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
					return
				}
				if (this.nickname) {
					let pages = getCurrentPages()
					let prevPage = pages[pages.length - 2]
					let obj={
						index:this.index,
						name:this.nickname
					}
					prevPage.$vm.getValue(obj)
					uni.navigateBack({
						delta: 1
					})
				}
				
			},
		}
	};
</script>

<style lang="scss">
	.container {
		padding-top: 20rpx;

		.tui-cell-input {
			width: 100%;
			display: flex;
			align-items: center;
			box-sizing: border-box;

			input {
				flex: 1;
				padding-left: $uni-spacing-row-base;
			}
		}

		.tui-btn-box {
			padding: 40rpx 30rpx 10rpx 30rpx;
			box-sizing: border-box;
		}
	}
</style>